/* eslint-disable */
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlCdnWebpackPlugin = require('add-asset-html-cdn-webpack-plugin');
const commonCssLoader = ['style-loader', 'css-loader'];
process.env.NODE_ENV = 'development';
/**
 * HMR:hot module replacement 热模块替换/模块热替换
 *  作用：一个模块发生变化，置灰重新打包这一个模块（而不是打包所有模块）
 *          极大提升构建速度
 *          样式文件：可以使用HMR功能，因为style-loader内部实现了
 *          js文件：默认不能实现HMR功能-->需要修改js代码,添加支持HMR功能的代码
 *                  注意：HMR功能对js的处理，只能处理非入口js文件的其他文件
 *          hmtl文件：默认不能实现HMR功能，同时会出现不能热更新的问题(不用做HMR功能)
 *                      解决：修改entry入口，将html文件引入
 * @type {{output: {path: string, filename: string}, devServer: {compress: boolean, port: number, open: boolean, contentBase: string}, mode: string, entry: string, plugins: [HtmlWebpackPlugin], module: {rules: ({test: RegExp, use: (string)[]}|{test: RegExp, use: (string|string)[]}|{test: RegExp, loader: string, options: {fix: boolean}, exclude: string}|{test: RegExp, loader: string, options: {outputPath: string, limit: number, name: string, esModule: boolean}}|{test: RegExp, loader: string})[]}}}
 */
module.exports = {
    entry: ['./src/index.js', './src/index.html'],
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [...commonCssLoader],
            },
            {
                test: /\.less$/,
                use: [...commonCssLoader, 'less-loader'],
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: '[hash*10].[ext]',
                    outputPath: 'img',
                    esModule: false,
                },
            },
            {
                test: /\.html$/,
                loader: 'html-loader',
            },
            {
                exclude: /\.(jpg|png|gif|js|html|css|less)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'media',
                },
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
        new AddAssetHtmlCdnWebpackPlugin(true, {
            jquery: 'http://code.jquery.com/jquery-git.min.js',
        }),
    ],
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        compress: true,
        port: 3000,
        open: true,
        //开启HMR共能
        hot: true,
    },
    mode: 'development',
};
